DOM Traversing Elements
In this tutorial, we will see how to traverse across the html DOM tree.
Ways to traverse across the DOM tree are,
- Get parent element
- Get child elements
- Get siblings of an element
Get Parent Element
To get the parent node of an element we use the parentNode property.
let parentNode = element.parentNode;
The parentNode property will return the parent node. If it does not contain the parent node then it return null.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript parentNode Tutorial</title>
</head>
<body>
<div id="main-container">
<p class="message">Parent Node Tutorial</p>
</div>
<script>
let message = document.querySelector('.message');
console.log(message.parentNode);
</script>
</body>
</html>
Output
<div id="main-container">
<p class="message">Parent Node Tutorial</p>
</div>
Get Child Elements
We have multiple properties to work with the child elements. They are,
- firstChild - Returns the first child node of any node type such as, an element node, text node or a comment node.
- firstElementChild - Returns the first child node of element node type.
- lastChild - Returns the last child node of any node type such as, an element node, text node or a comment node.
- lastElementChild - Returns the last child node of element node type.
- childeNodes - Returns all the child elements of any node type.
- children - Returns all the child elements of element type node.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Child Element Access Tutorial</title>
</head>
<body>
<ul id="menu">
<li class="first">Home</li>
<li>Products</li>
<li class="current">Customer Support</li>
<li>Careers</li>
<li>Investors</li>
<li>News</li>
<li class="last">About Us</li>
</ul>
<script>
// Selecting the element with menu id.
let menuNode = document.querySelector('#menu');
let firstChildNodeName = menuNode.firstChild.nodeName;
let firstElementChildText = menuNode.firstElementChild.innerText;
let lastChildNodeName = menuNode.lastChild.nodeName;
let lastElementChildText = menuNode.lastElementChild.innerText;
let childNodes = menuNode.childNodes;
let childrenElements = menuNode.children;
document.write("\nfirstChild Example: ", firstChildNodeName);
document.write("<br/>firstElementChild Example: ", firstElementChildText);
document.write("<br/>lastChild Example: ", lastChildNodeName);
document.write("<br/>lastElementChild Example: ", lastElementChildText);
document.write("<br/>childNodes Example: ", childNodes);
document.write("<br/>children Example: ", childrenElements);
</script>
</body>
</html>
Output
firstChild Example: #text
firstElementChild Example: Home
lastChild Example: #text
lastElementChild Example: About Us
childNodes Example: [object NodeList]
children Example: [object HTMLCollection]
Get Siblings Elements
JavaScript provides properties to access the siblings of the element. The properties are,
- nextElementSibling - Returns the next sibling of the element. If there is no element, then it returns null.
- previousElmentSibling - Returns the previous sibling of the element. If there is no element, then it returns null.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Sibling Element Access Tutorial</title>
</head>
<body>
<ul id="menu">
<li class="first">Home</li>
<li>Products</li>
<li class="current">Customer Support</li>
<li>Careers</li>
<li>Investors</li>
<li>News</li>
<li class="last">About Us</li>
</ul>
<script>
let currentNode = document.querySelector('.current');
let nextSibling = currentNode.nextElementSibling;
let prevSibling = currentNode.previousElementSibling;
document.write("<br/>NextSibling Example: ", nextSibling.innerText);
document.write("<br/>PreviousSibling Example: ", prevSibling.innerText);
</script>
</body>
</html>
Output
NextSibling Example: Careers
PreviousSibling Example: Products